<script setup>
import BottomBarChild from './BottomBarChild.vue'
import { ref,defineProps,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import $ from 'jquery/dist/jquery'

const router = useRouter()
const mywallet = ref("我的钱包")

const Mybankcard = ref("我的银行卡")

const transactionrecords = ref("交易记录")

const personalsettings = ref("个人设置")

const props = defineProps({type:String})

const isT = ref(false)

onMounted(()=>{
    $('.btn:first-child').css("color","#1f9cf0")
    $('.btn').click(function(){
        $(this).css("color","#1f9cf0").siblings().css("color","")        
    })

})
function linkto(url){
    router.push(url)
}
</script>

<template>
    <el-row class="bottom">
        <el-col :span="6" class="btn">
            <BottomBarChild :type="mywallet" @click="$emit('changeBankcard',mywallet) ,linkto('/')"/>
        </el-col>
        <el-col :span="6" class="btn">
            <BottomBarChild :type="Mybankcard"  @click="$emit('changeBankcard',Mybankcard),linkto('/card-all')" />
        </el-col>
        <el-col :span="6" class="btn">
            <BottomBarChild :type="transactionrecords"  @click="$emit('changeBankcard',transactionrecords),linkto('/ransaction-records')" />
        </el-col>
        <el-col :span="6" class="btn">
            <BottomBarChild :type="personalsettings"   @click="$emit('changeBankcard',personalsettings),linkto('/personal-settings')" />
        </el-col>
    </el-row>
    
</template>

<style scoped>

.bottom{
    position: fixed;
    bottom: 0px;
    height: 50px;
    text-align: center;
    background-color: rgb(240, 245, 240) ;
    color: lightgrey;
    width: 100%;
    font-size: large;
    font-weight: bolder;
}
.bottom-1{
    height: 50px;
}
.el-col-6 {
  margin-top: 5px;
  font-size: 20px;
}
</style>